<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>登录/注册</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/common.css" />
  <link rel="stylesheet" type="text/css" href="css/loginframe.css" />
</head>

<body>
  <div class="container">
    <!--短信登录/注册，密码登录-->
    <div class="login">
      <!--切换菜单-->
      <div class="switch-menu clearfix">
        <a href="javascript:;" class="left selected"> 短信登录/注册 </a>
        <a href="javascript:;" class="right "> 密码登录 </a>
      </div>
      <div class="form">
        <!--短信登录/注册表单-->
        <div class="dom" style="display: block">
          <div>
            <div class="form-item">
              <p class="txt">
                请仔细阅读
                <a href="#">豆瓣使用协议、隐私政策</a>
              </p>
            </div>
            <div class="form-item">
              <input type="text" class="more-text-indent" placeholder="手机号" />
              <div class="country-code">
                <div>+86</div>
                <div class="codes">
                  <div class="choose-area hidden">
                    <div class="center">
                      <div class="title">选择国际区号</div>
                      <ul>
                        <li class="clearfix selected">
                          <span class="left">国家名1</span>
                          <i class="left iconfont iconGroup-"></i>
                          <span class="right">+1</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名2</span><span class="right">+2</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名3</span><span class="right">+3</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名4</span><span class="right">+4</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名5</span><span class="right">+5</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名6</span><span class="right">+6</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名7</span><span class="right">+7</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名8</span><span class="right">+8</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名9</span><span class="right">+9</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名10</span><span class="right">+10</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名11</span><span class="right">+11</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名12</span><span class="right">+12</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名13</span><span class="right">+13</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名14</span><span class="right">+14</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名15</span><span class="right">+15</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名16</span><span class="right">+16</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名17</span><span class="right">+17</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名18</span><span class="right">+18</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名19</span><span class="right">+19</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名20</span><span class="right">+20</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名21</span><span class="right">+21</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名22</span><span class="right">+22</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名23</span><span class="right">+23</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名24</span><span class="right">+24</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名25</span><span class="right">+25</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名26</span><span class="right">+26</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名27</span><span class="right">+27</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名28</span><span class="right">+28</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名29</span><span class="right">+29</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名30</span><span class="right">+30</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名31</span><span class="right">+31</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名32</span><span class="right">+32</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名33</span><span class="right">+33</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名34</span><span class="right">+34</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名35</span><span class="right">+35</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名36</span><span class="right">+36</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名37</span><span class="right">+37</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名38</span><span class="right">+38</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名39</span><span class="right">+39</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名40</span><span class="right">+40</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名41</span><span class="right">+41</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名42</span><span class="right">+42</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名43</span><span class="right">+43</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名44</span><span class="right">+44</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名45</span><span class="right">+45</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名46</span><span class="right">+46</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名47</span><span class="right">+47</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名48</span><span class="right">+48</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名49</span><span class="right">+49</span>
                        </li>
                        <li class="clearfix">
                          <span class="left">国家名50</span><span class="right">+50</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-item">
              <input type="text" placeholder="验证码" />
              <a href="#" class="ab-right"> 获取验证码 </a>
            </div>
            <div class="form-item">
              <button class="btn">登录豆瓣</button>
            </div>
            <div class="form-item tip clearfix">
              <label class="left">
                <input type="checkbox" name="" id="" />
                下次自动登录
              </label>
              <span class="right">
                <a href="#"> 收不到验证码 </a>
              </span>
            </div>
            <div class="bottom">
              <span class="msg"> 第三方登录： </span>
              <i class="iconfont iconweixin"></i>
              <i class="iconfont iconweibo"></i>
            </div>
          </div>
        </div>

        <!--密码登录表单-->
        <div class="dom">
          <div class="form-item tip clearfix">
            <a href="" class="right">找回密码</a>
            <div class="form-item">
              <input type="text" placeholder="手机号/邮箱" />
            </div>
            <div class="form-item">
              <input type="password" placeholder="密码" />
            </div>
            <div class="form-item">
              <button class="btn">登录豆瓣</button>
            </div>
            <div class="form-item tip clearfix">
              <label class="left">
                <input type="checkbox" name="" id="" />
                下次自动登录
              </label>
              <span class="right">
                <a href="#"> 海外手机登录 </a>
              </span>
            </div>
            <div class="bottom">
              <span class="msg"> 第三方登录： </span>
              <i class="iconfont iconweixin"></i>
              <i class="iconfont iconweibo"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--扫码登录-->
    <div class="qrcode hidden longin-quick ">
      <div class="title">二维码登录</div>
      <div class="code">
        <img src="img/qrcode.png" />
      </div>
      <div class="tip">请打开豆瓣客户端扫一扫</div>
    </div>
    <div class="change">
      <i class="icon icon-qrcode" style="display: block"></i>
      <i class="icon icon-pc"></i>
    </div>
    <div class="pointer hidden">扫码登录</div>
    <div class="pointer hidden">短信登录/注册</div>
  </div>

  <script src="./js/loginframe.js"></script>
</body>


</html>